<template>
    <view class="loginBox">
        <view class="userLoginFrom">
            <input 
                class="username"
                v-model="username"
                placeholder="请输入用户名"
                @blur="verifyUsername"
            />
            <input 
                class="password"
                type="password"
                v-model="password"
                placeholder="请输入密码"
                @blur="verifyPassword"
            />
            <input 
                class="password"
                type="password"
                v-model="password2"
                placeholder="请确认密码"
                @blur="confirmPassword"
            />
            <text>{{id}}</text>
            <button class="registerBtn" @click="userRegister">注册</button>
            <view class="loginTip">已经有账号？点击<text class="loginText" @click="toLogin">登录</text></view>
        </view>
    </view>
</template>

<script setup>
    import { ref } from 'vue'
    import { register } from '../../api/api'

    let username = ref('')
    let password = ref('')
    let password2 = ref('')

    const userReg = /^[a-zA-Z0-9\u4e00-\u9fa5]{2,12}$/;
    const pwdReg = /^[a-zA-Z0-9]{6,12}$/;
    
    function verifyUsername() {
        if (!userReg.test(username.value)) {
            uni.showToast({
                title: '用户名格式错误',
                icon: 'none'
            })
            return false
        }
    }
    function verifyPassword() {
        if (!pwdReg.test(password.value)) {
            uni.showToast({
                title: '密码格式错误',
                icon: 'none'
            })
            return false
        }
    }
    function confirmPassword() {
        if (password.value !== password2.value) {
            uni.showToast({
                title: '两次密码输入不一致',
                icon: 'none'
            })
            return false
        }
    }
    function userRegister() {
        if (verifyUsername() === false || verifyPassword() === false || confirmPassword() === false) {
            return false
        }
        register({
            id: Math.floor(Math.random() * 1000000),
            username: username.value,
            password: password.value
        }).then(arr => {
            uni.showToast({
                title: arr.message,
                icon: 'success'
            })
        }).catch(err => {
            uni.showToast({
                title: err.message,
                icon: 'none'
            })
        }) 
    }

    function toLogin() {
        uni.navigateTo({
            url: '/pages/login/login'
        })
    }

</script>

<style lang="scss" scoped>
page, html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.loginBox {
    background: #f3f8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    .userLoginFrom {
        width: 80%;
        max-width: 480rpx;
        transform: translateY(-30%);
    }

    .username,
    .password {
        width: 100%;
        height: 88rpx;
        margin-bottom: 40rpx;
        padding: 0 32rpx;
        box-sizing: border-box;
        border: 1rpx solid #b3d4fc;
        border-radius: 12rpx;
        font-size: 30rpx;
        background: #ffffff;
        transition: border-color .2s;
    }
    .username:focus,
    .password:focus {
        border-color: #4096ff;
    }

    .registerBtn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        background: #7bb8ff;
        color: #fff;
        border-radius: 12rpx;
        font-size: 32rpx;
        border: none;
        transition: background .2s;
    }
    .registerBtn:active {
        background: #4096ff;
    }

    .loginTip {
        margin-top: 32rpx;
        text-align: center;
        font-size: 28rpx;
        color: #666;
    }
    .loginText {
        color: #4096ff;
    }
}
</style>